<template>
  <template v-if="currentUserIsLogin">
    <!-- <el-popover
            title="Title"
         
            trigger="hover"
            content="this is content, this is content, this is content"
        >
            <template #reference>
                <el-button>Hover to activate</el-button>
            </template>
        </el-popover>-->

    <el-dropdown>
      <div class="login-icon">
        <div>
          <span :style="style">{{ currentUserName }}</span>

          <el-icon :style="style" style="margin-left: 4px">
            <arrow-down />
          </el-icon>
        </div>
        <div style="margin-left: 10px">
          <el-badge
            is-dot
            :hidden="unReadMessageCount == 0 || unReadMessageCount == null"
            :value="unReadMessageCount"
            :max="99"
            class="item"
          >
            <el-avatar :size="32" :src="currentAvatar">
              <img src="@/assets/default-avatar.svg" />
            </el-avatar>
          </el-badge>
        </div>
      </div>

      <template #dropdown>
        <el-dropdown-menu style="width: 100px">
          <el-dropdown-item @click="toWorkbench">{{
            $store.state.menu.isExternalWorkbench ? "工作台" : "管理后台"
          }}</el-dropdown-item>

          <!-- 当当前员工是平台 而且被配置了工作台的菜单的时候 显示 (一般是DEBUG的时候用) -->
          <el-dropdown-item
            v-if="currentEmployeeIsPlatform && $store.state.menu.isExternalWorkbench"
            @click="$router.push('/internal')"
            >管理后台</el-dropdown-item
          >

          <el-dropdown-item v-if="$store.state.auth.multipleAccount" @click="toChooseCompany">选择公司</el-dropdown-item>
          <el-dropdown-item @click="toUserSetting">个人中心</el-dropdown-item>
          <el-dropdown-item @click="toMessageManage">
            <span>消息通知</span>
            <span
              style="color: #f56c6c"
              v-if="unReadMessageCount != 0 && unReadMessageCount != null"
              >({{ unReadMessageCount }})</span
            >
          </el-dropdown-item>
          <el-dropdown-item @click="logout" divided>登出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </template>
  <template v-else>
    <span @click="toLogin" class="login-text" :style="style">登录/注册</span>
    <img v-if="isWhite" @click="toLogin" src="@/assets/images/userIcon-white.svg" class="login-btn" />
    <img v-else @click="toLogin" src="@/assets/images/userIcon.svg" class="login-btn" />
  </template>
  <UserLoginDialog @success="loginSuccess" ref="userDialog"></UserLoginDialog>
</template>

<script>
import { defineComponent } from "vue";
import UserLoginDialog from "@/components/login/UserLoginDialog.vue";
import { ArrowDown } from "@element-plus/icons";
export default defineComponent({
  components: {
    UserLoginDialog,
    ArrowDown,
  },
  props: {
    style: {
      type: Object,
      default: "",
    },
  },
  data() {
    return {
        isWhite:true
    };
  },
  methods: {
    async loginSuccess() {
      this.$message.success("登录成功");
      try {
        await this.$store.dispatch("menu/getCurrentEmployeeMenuTree");
      } catch {}
      this.$router.push("/workbench/dashboard");
    },
    async logout() {
      this.$message.success("登出成功");
      await this.$store.dispatch("auth/logout");
      window.location.reload();
    },
    getImgUrl(icon){
      return require("@/assets/images/"+icon);
    },
    /**
     * 前往工作台
     */
    toWorkbench() {
      // 判断是否登录 如果没登录跳转到选择企业
      if (this.$store.dispatch("auth/checkAndTryChooseEmployee") == false) {
        this.$router.push("/chooseCompany");
        return;
      }
      // 防止重复跳转
      if (this.$route.matched.find((t) => t.path == "/external/workbench")) {
        return;
      }
      this.$router.push(this.$store.getters["menu/workbenchPath"]);
    },
    /**
     * 选择公司
     */
    toChooseCompany() {
      this.$router.push("/chooseCompany");
    },
    toMessageManage() {
      this.$router.push("/manage/message");
    },
    // 用户设置
    toUserSetting() {
      this.$router.push("/manage/userSetting");
    },
    toLogin() {
      if (this.currentUserIsLogin) {
        return;
      }
      this.$refs.userDialog.openDialog();
    },
    /**
     * 获得消息数量
     */
    async getMessageCount() {
      await this.$store.dispatch("message/getMessageCount", true);
    },
    handleScroll() {
      const top = document.documentElement.scrollTop; //获取scroll偏移值
      if (top < 650) {
       this.isWhite=true
      } else {
         this.isWhite=false
      }
    },
  },
  async mounted() {
    // 监听用户登录

    this.getMessageCount();

    if (this.$route.query.showLogin) {
      this.$router.replace({
        query: {},
      });
      this.$refs.userDialog.openDialog();
    }
    //监听滚轮
    window.addEventListener("scroll", this.handleScroll);
  },
  computed: {
    /**
     * 当前员工是否是平台
     */
    currentEmployeeIsPlatform() {
      if (this.$store.state.auth.employee == null) {
        return false;
      }

      return this.$store.state.auth.employee.CompanyType == 0;
    },
    // 当前用户是否登录
    currentUserIsLogin() {
      if (this.$store.state.auth.user != null) {
        return true;
      }
      return false;
    },
    // 当前员工是否已经登录
    currentEmployeeIsLogin() {
      if (this.$store.state.auth.employee != null) {
        return true;
      }
      return false;
    },
    // 当前登录用户的名称
    currentUserName() {
      if (this.currentUserIsLogin) {
        return this.$store.state.auth.user.RealName;
      }
      return "";
    },
    // 当前登录用户的名称
    currentAvatar() {
      if (this.currentUserIsLogin) {
        return this.$store.state.auth.user.Avatar;
      }
      return "";
    },
    // 未读消息数量
    unReadMessageCount() {
      return this.$store.state.message.unReadMessageCount;
    },
  },
});
</script>

<style lang="scss" scoped>
.login-btn {
  cursor: pointer;
  width:30px;
  
}
.login-icon {
  display: flex;
  align-items: center;
  transition: 0.5s;
}
.login-text {
  margin-right: 16px;
  color: #606266;
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
}
</style>
